<template>
  <div class="songyuan-boundary" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
    <div class="content-container">
      <div class="chart-container">
<!--        <svg width="100%" height="50%" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">-->
<!--          <path :d="boundaryPath" fill="#007bff" stroke="#fff" stroke-width="2" transform="translate(200, 10) scale(0.8)"/>-->
<!--        </svg>-->
           <div class="BigData">
             <div class="big-tit">
               <h2>松原市前郭县住宅专项维修资金应用展示</h2>
             </div>
             <div class="accu-demo accu-bg1">
               <h3>累计总户数</h3>
               <span><em class="col-blue">611.508</em>户</span>
             </div>
             <div class="accu-demo accu-bg2">
               <h3>累计总金额</h3>
               <span><em class="col-yellow">611.508</em>元</span>
             </div>
              <div class="BigData-main">
                    <div class="BigData-main-con">
                        <div class="main-demo bigdata-demo-1">
                         <!-- 添加滚屏列表 -->
                          <div class="l-box l-box-1">
                            <div class="common-tit">滚屏列表</div>
                            <div class="scroll-list">
                              <el-table :data="tableData" style="width: 100%" :show-header="false">
                                <el-table-column prop="date" label="日期"></el-table-column>
                                <el-table-column prop="name" label="姓名"></el-table-column>
                                <el-table-column prop="address" label="地址"></el-table-column>
                              </el-table>
                            </div>
                          </div>
                           <div class="l-box l-box-2" >
                              <div class="common-tit">用途分类户数</div>
                              <div id="pieChart" class="chart-box"></div><!-- 饼图-->
                           </div>
                           <div class="l-box l-box-3">
                             <div class="common-tit">年度数据报表</div>
                            <div id="barChart" class="chart-box"></div><!-- 柱状图-->
                           </div>
                         </div>
                        <div class="main-demo bigdata-demo-2">
                          <div class="c-box c-box-1">
                            <div class="map-tit">
                              <h2>前郭县</h2>
                            </div>
                            <div class="daydata-box">
                              <div class="data-demo data-demo-1">
                                <h3>548,480</h3>
                                <span>当日缴费笔数</span>
                              </div>
                              <div class="data-demo data-demo-2">
                                <h3>548,480</h3>
                                <span>当日缴费金额</span>
                              </div>
                              <div class="data-demo data-demo-3">
                                <h3>548,480</h3>
                                <span>当日维修户数</span>
                              </div>
                            </div>
                            <div class="operation-box">
<!--                              <div class="operation-demo">-->
<!--                                &lt;!&ndash; 仪表盘&ndash;&gt;-->
<!--                              </div>-->
                            </div>
                            <svg width="100%" height="100%" viewBox="20 30 800 600" preserveAspectRatio="xMidYMid meet">
                              <path :d="boundaryPath" fill="#13277a" stroke="#28ccd3" stroke-width="2" transform="translate(900, -510) scale(1.5)" />
                            </svg>
                          </div>
                          <div class="c-box c-box-2">
                            <div class="map-table">
                              <div class="l-table">
                                <ul class="t-head">
                                  <li>开发企业</li>
                                  <li>街道办事处</li>
                                  <li>社区</li>
                                </ul>
                                <ul class="t-con">
                                  <li>88</li>
                                  <li>88</li>
                                  <li>99</li>
                                </ul>
                              </div>
                              <div class="r-table">
                                <ul class="t-head">
                                  <li>业主委员会</li>
                                  <li>物业公司</li>
                                  <li>施工企业</li>
                                </ul>
                                <ul class="t-con">
                                  <li>88</li>
                                  <li>88</li>
                                  <li>99</li>
                                </ul>
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="main-demo bigdata-demo-3">
                          <div class="r-box r-box-1">
                            <div class="thisYear-list" ref="thisYearList">
                              <div class="thisYear-demo">
                                <h3>本年缴费金额</h3>
                                <span>254.5367</span>
                                <p class="zb-add">比同期<span>40%</span><span class="glyphicon glyphicon-arrow-up"></span></p>
                              </div>
                              <div class="thisYear-demo">
                                <h3>本年缴费户数</h3>
                                <span>254.5367</span>
                                <p class="zb-add">比同期<span>40%</span><span class="glyphicon glyphicon-arrow-up"></span></p>
                              </div>
                              <div class="thisYear-demo">
                                <h3>本年维修金额</h3>
                                <span>254.5367</span>
                                <p class="zb-add">比同期<span>40%</span><span class="glyphicon glyphicon-arrow-up"></span></p>
                              </div>
                              <div class="thisYear-demo">
                                <h3>本年维修户数</h3>
                                <span>254.5367</span>
                                <p class="zb-minus">比同期<span>40%</span><span class="glyphicon glyphicon-arrow-down"></span></p>
                              </div>
                            </div>

                          </div>
                          <div class="r-box r-box-2">
                            <div class="common-tit">收缴比率</div>
                            <div id="gaugeChart" class="tc-chart-box"></div>
                            <div id="lineChart" class="chart-box" style="display: none"></div> <!-- 新增线型图 -->
                          </div>
                          <div class="r-box r-box-3">
                            <div class="common-tit">用途分类面积</div>
                            <div id="ringChart" class="chart-box"></div>
                          </div>
                          <!-- 环形图-->
<!--                           <div id="gaugeChart" style="width: 50%; height: 40%;"></div>&lt;!&ndash; 仪表盘&ndash;&gt;-->

                         </div>

                    </div>
              </div>
           </div>
        </div>
      </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {getDoorSumByPurpose, getCostSumYear,getDoorInfo,getTripartiteSum,
  getCostSumToday,getDoorSum,getDoorCountByCostSts,getDoorSumByYear} from "@/api/report/fundUsage"; // 新增导入 getCostSumYear 接口

export default {
  data() {
    return {
      backgroundImage: '',
      boundaryPath: 'M-447 371L-439 364L-430 364L-428 367L-427 378L-414 378L-413 390L-407 392L-399 400L-396 425L-384 424L-380 447L-368 446L-364 470L-376 472L-372 509L-384 510L-376 582L-391 586L-434 591L-446 594L-516 602L-522 604L-562 609L-551 623L-550 622L-549 624L-546 622L-544 625L-548 627L-537 639L-533 654L-525 660L-522 659L-516 666L-504 674L-478 698L-467 703L-457 710L-456 711L-462 715L-439 732L-433 724L-421 716L-412 707L-403 702L-378 680L-364 671L-355 669L-347 663L-323 655L-324 654L-322 650L-318 648L-316 649L-316 643L-322 634L-316 629L-311 622L-309 622L-302 616L-304 615L-305 612L-301 608L-300 609L-279 601L-272 605L-264 599L-263 594L-257 600L-253 597L-253 599L-251 597L-251 593L-256 585L-241 575L-239 577L-233 577L-218 567L-216 569L-211 565L-208 565L-200 555L-199 559L-197 559L-196 561L-189 559L-187 561L-185 560L-180 567L-182 562L-181 563L-181 561L-180 563L-178 563L-176 561L-173 561L-172 557L-167 552L-167 554L-163 555L-153 550L-152 551L-149 547L-148 549L-145 547L-141 552L-139 552L-126 546L-130 541L-132 541L-133 537L-135 537L-135 539L-141 539L-145 537L-147 531L-142 528L-147 524L-155 525L-162 522L-161 518L-163 516L-164 508L-167 505L-168 501L-174 499L-177 494L-186 490L-185 484L-191 477L-191 474L-196 471L-195 469L-199 465L-202 465L-204 461L-210 459L-211 455L-216 450L-224 448L-227 443L-226 441L-232 434L-234 434L-236 429L-240 428L-241 425L-246 435L-251 432L-254 436L-245 441L-243 437L-238 441L-242 443L-239 444L-240 452L-257 451L-263 447L-267 442L-280 441L-284 442L-285 446L-287 442L-288 431L-291 430L-288 424L-293 424L-295 422L-296 417L-302 415L-300 413L-306 407L-305 401L-316 401L-312 393L-312 390L-310 390L-303 384L-301 378L-298 375L-291 377L-288 374L-281 373L-275 370L-275 368L-280 365L-280 361L-278 359L-279 356L-276 350L-282 348L-284 342L-289 341L-293 335L-293 332L-289 327L-294 317L-302 319L-314 312L-316 313L-314 322L-323 328L-334 323L-342 310L-354 313L-358 318L-362 317L-368 311L-382 321L-391 324L-403 336L-430 354L-440 357L-445 363z',
      tableData: [], // 初始化为空数组，等待接口返回数据后更新
      scrollInterval: null,
      ringChartData: [], // 新增环形图数据
      costSumYearData: [] // 新增年度费用数据
    };
  },
  mounted() {
    this.setBackgroundImage();
    this.initBarChart();
    this.getRingChartData(); // 获取环形图数据
    this.getPieChartData(); //
    this.initGaugeChart();
    this.initLineChart();
    this.getDoorInfoData(); // 获取滚动列表数据
    this.startScroll();
    this.getCostSumYearData(); // 获取年度费用数据
    this.getCostSumTodayData(); // 获取当日费用数据
    this.getDoorSumData(); // 获取总数据
    this.getTripartiteSumData(); // 获取三方数据
  },
  methods: {
    setBackgroundImage() {
      this.backgroundImage = 'http://qgxhome.com:8433/PRINT/images/BigData-bg.jpg';
    },
    // 获取滚动列表数据并更新展示
    getDoorInfoData() {
      getDoorInfo().then(response => {
        this.tableData = response.rows.map(item => {
          return {
            date: item.costDate, // 假设接口返回的日期字段为 costDate
            name: item.userName, // 假设接口返回的姓名字段为 userName
            address: item.doorAddr // 假设接口返回的地址字段为 doorAddr
          };
        });
      });
    },
    initBarChart() {
      const barChart = echarts.init(document.getElementById('barChart'));
      const option = {
        title: {
          // text: '柱状图示例',
          // left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: [], // 初始为空，等待接口返回数据后更新
          axisLabel: {
            color: '#fff' // 将 x 轴文字颜色设置为白色
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
/*            color: '#fff', // 将 y 轴文字颜色设置为白色
            formatter: function(value) {
              // 修改: 返回自定义格式的数值，例如直接返回 value 或者其他格式
              return value; // 直接返回 value，显示原始数值
              // 或者可以根据需求进行其他格式化，例如：
              // return value.toLocaleString(); // 使用千位分隔符
            }*/
          },
          splitLine: {
            show: true, // 显示刻度线
            lineStyle: {
              color: '#fff' // 设置刻度线颜色为白色
            }
          }
        },
        series: [
          {
            name: '总分摊金额',
            type: 'bar',
            data: [],// 初始为空，等待接口返回数据后更新
            itemStyle: {
              color: '#007bff' // 这里设置柱状图的颜色
            }

          },
          {
            name: '总缴费金额',
            type: 'bar',
            data: [] // 初始为空，等待接口返回数据后更新
          },
          {
            name: '总利息金额',
            type: 'bar',
            data: [], // 初始为空，等待接口返回数据后更新
            itemStyle: {
              color: '#e6ff00' // 这里设置柱状图的颜色
            }
          }
        ]
      };
      barChart.setOption(option);
      this.getDoorSumByYearData(barChart); // 调用接口获取数据并更新柱状图
    },

    // 获取年度数据并更新柱状图
    getDoorSumByYearData(barChart) {
      getDoorSumByYear().then(response => {
        const data = response.rows; // 假设接口返回的数据是一个数组
        // 对年度数据进行从小到大排序
        data.sort((a, b) => new Date(a.costDate) - new Date(b.costDate));
        const years = data.map(item => item.costDate); // 提取年度
        const repairMoneys = data.map(item => item.repairMoney);
        const costMoneys = data.map(item => item.costMoney);
        const rateMoneys = data.map(item => item.rateMoney);

        barChart.setOption({
          xAxis: {
            data: years // 更新x轴数据
          },
          series: [
            {
              data: repairMoneys // 更新总户数数据
            },
            {
              data: costMoneys // 更新总缴费金额数据
            },
            {
              data: rateMoneys // 更新总余额数据
            }
          ]
        });
      });
    },

    getPieChartData() {
      getDoorSumByPurpose().then(response => {
        this.pieChartData = response.rows.map(item => {
          return { value: item.doorSum, name: item.purposeName }; // 修改为使用 purposeName 和 space
        });
        this.initPieChart();
      });
    },
    initPieChart() {
      const pieChart = echarts.init(document.getElementById('pieChart'));
      const option = {
        title: {
          // text: '饼状图示例',
          // left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '户数',
            type: 'pie',
            radius: '50%',
            data: this.pieChartData, // 使用接口返回的数据
            itemStyle: {
              color: function(params) {
                // 自定义颜色数组
                const colorList = ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC'];
                return colorList[params.dataIndex % colorList.length];
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieChart.setOption(option);
    },
    getRingChartData() {
      getDoorSumByPurpose().then(response => {
        this.ringChartData = response.rows.map(item => {
          return { value: item.space, name: item.purposeName }; // 修改为使用 purposeName 和 space
        });
        this.initRingChart();
      });
    },
    initRingChart() {
      const ringChart = echarts.init(document.getElementById('ringChart'));
      const option = {
        title: {
          // text: '环形图示例',
          // left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '面积',
            type: 'pie',
            radius: ['40%', '70%'],
            data: this.ringChartData, // 使用接口返回的数据
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      ringChart.setOption(option);
    },

    initGaugeChart() {
      const gaugeChart = echarts.init(document.getElementById('gaugeChart'));
      const option = {
        title: {
          // text: '仪表盘示例',
          // left: 'center'
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '进度',
            type: 'gauge',
            progress: {
              show: true,
              width: 18
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%'
            },
            data: [
              {
                value: 0, // 初始值为0，等待接口返回数据后更新
                name: '完成率'
              }
            ]
          }
        ]
      };
      gaugeChart.setOption(option);
      this.getDoorCountByCostStsData(gaugeChart); // 调用接口获取数据并更新仪表盘
    },

    // 获取仪表盘数据并更新展示
    getDoorCountByCostStsData(gaugeChart) {
      getDoorCountByCostSts().then(response => {
        const data = response.data; // 假设接口返回的数据是一个对象
        const value = data.ratio5; // 假设接口返回的完成率字段为 ratio5
        gaugeChart.setOption({
          series: [
            {
              data: [
                {
                  value: value,
                  name: '完成率'
                }
              ]
            }
          ]
        });
      });
    },

    initLineChart() {
      const lineChart = echarts.init(document.getElementById('lineChart'));
      const option = {
        title: {
          // text: '线型图示例',
          // left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销量',
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130]
          }
        ]
      };
      lineChart.setOption(option);
    },
    startScroll() {
      this.scrollInterval = setInterval(() => {
        this.tableData.push(this.tableData.shift());
      }, 2000);
    },
    stopScroll() {
      clearInterval(this.scrollInterval);
    },
    getCostSumYearData() {
      getCostSumYear().then(response => {
        this.costSumYearData = response.data; // 存储年度费用数据
        this.updateCostSumYearDisplay(); // 更新展示
      });
    },
    // 获取总数据并更新展示
    getDoorSumData() {
      getDoorSum().then(response => {
        const data = response.data; // 假设接口返回的数据是一个对象
        // 更新累计总户数、累计总金额
        document.querySelector('.accu-bg1 em').textContent = data.doorSum;
        document.querySelector('.accu-bg2 em').textContent = data.costMoney;
      });
    },
    // 获取当日费用数据并更新展示
    getCostSumTodayData() {
      getCostSumToday().then(response => {
        const data = response.data; // 假设接口返回的数据是一个对象
        // 更新当日缴费笔数、当日缴费金额、当日维修户数
        document.querySelector('.data-demo-1 h3').textContent = data.costSum;
        document.querySelector('.data-demo-2 h3').textContent = data.costMoney;
        document.querySelector('.data-demo-3 h3').textContent = data.repairSum;
      });
    },
    updateCostSumYearDisplay() {
        const data = this.costSumYearData; // 假设接口返回的数据是一个数组，取第一个元素
        // 更新本年缴费金额、本年缴费户数、本年维修金额、本年维修户数及比同期比率
        //1是costsum，2是costmoney，3是repairsum，4是repairmoney
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(1) span').textContent = data.costMoney;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(1) p span').textContent = data.ratio2;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(2) span').textContent = data.costSum;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(2) p span').textContent = data.ratio1;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(3) span').textContent = data.repairMoney;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(3) p span').textContent = data.ratio4;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(4) span').textContent = data.repairSum;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(4) p span').textContent = data.ratio3;
    },
    // 获取三方数据并更新展示
    getTripartiteSumData() {
      getTripartiteSum().then(response => {
        const data = response.data; // 假设接口返回的数据是一个对象
        // 更新开发企业、街道办事处、社区、业主委员会、物业公司、施工企业的数据
        document.querySelector('.l-table .t-con li:nth-child(1)').textContent = data.estateSum;
        document.querySelector('.l-table .t-con li:nth-child(2)').textContent = data.streetSum;
        document.querySelector('.l-table .t-con li:nth-child(3)').textContent = data.communitySum;
        document.querySelector('.r-table .t-con li:nth-child(1)').textContent = data.committeeSum;
        document.querySelector('.r-table .t-con li:nth-child(2)').textContent = data.propertySum;
        document.querySelector('.r-table .t-con li:nth-child(3)').textContent = data.companySum;
      });
    },
  },
  beforeDestroy() {
    this.stopScroll();
  }
};
</script>

<style scoped>
.songyuan-boundary {
  width: 100%;
  height: 1200px; /* 增加整体高度 */
  background-color: #f5f5f5;
  background-size: cover;
  background-position: center;
}

.content-container {
  display: flex;
  justify-content: center; /* 居中显示 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  height: 100%;
}

.chart-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 居中显示 */
  width: 97%; /* 增加宽度 */
  height: 100%; /* 增加高度 */
}

.chart-box {
  width: 100%;
  height: calc(100% - 30px); /* 调整图表容器高度 */
  margin-top: 40px; /* 调整上边距 */
  position: relative;
}

.l-box-1 {
  height: 400px; /* 增加高度 */
}

.l-box-2 {
  flex: 1;
  height: 500px; /* 增加高度 */
}
.l-box-2 .chart-box {
  margin-top: 65px; /* 调整上边距 */
}
.l-box-3 {
  flex: 1;
  height: 500px; /* 增加高度 */
}

.r-box-2 {
  flex: 1;
  height: 400px; /* 增加高度 */
}

.r-box-3 {
  flex: 1;
  height: 500px; /* 增加高度 */
}

.scroll-list {
  width:auto;
  height: calc(100% - 46px);
  margin-top: 46px;
  overflow: hidden;
  margin-left: 20px;
  background-color: transparent; /* 设置背景为透明 */
  color: #fff; /* 设置文字颜色为白色，以便在背景图片上清晰可见 */
}
.scroll-list tbody tr{
  background: none !important;
}
.scroll-list .el-table {
  background-color: transparent; /* 设置表格背景为透明 */
}

.scroll-list .el-table th,
.scroll-list .el-table td {
  background-color: transparent; /* 设置表头和单元格背景为透明 */
  color: #fff; /* 设置表头和单元格文字颜色为白色 */
}
/*4-10*/
.BigData {
  width: 100%;
  height: 100%;
  /*background: url(../images/BigData-bg.jpg);*/
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
}

.BigData .big-tit {
  width: 100%;
  height: 55px;
  background: url(images/BigData-tit.png);
  text-align: center;
  background-size: 100% 100%;
  margin-top: 0;
}

.BigData .big-tit h2 {
  background-image: linear-gradient(bottom, #67ddf8, #ffffff 70%);
  background-image: -webkit-linear-gradient(bottom, #67ddf8, #ffffff 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
  font-weight: bold;
  line-height: 55px;
}

.BigData-main {
  height: calc(100% - 20px);
  padding: 20px 15px 15px 15px;
}

.BigData-main .BigData-main-con {
  height: 100%;
  padding-top: 15px;
  display: flex;
  justify-content: left;
}
.bigdata-demo-1 {
  flex: 1;
  height: 100%;
}

.bigdata-demo-2 {
  flex: 2;
  height: 100%;
}
.bigdata-demo-2 {
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
}
.bigdata-demo-3 {
  flex: 1;
  height: 100%;
}
.common-tit {
  width: 100%;
  height: 40px;
  background: url('images/gg-titbg.png') no-repeat;
  background-size: auto 100%;
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  padding-left: 30px;
  position: absolute;
  left: 0;
  top: 0;
}
.bigdata-demo-1 {
  display: flex
;
  flex-direction: column;
}
.bigdata-demo-1 {
  flex: 1;
  height: 100%;
}
.l-box {
  margin-bottom: 20px;
}
.qh_table table thead {
  width: 100%;
}

.qh_table table thead td {
  background: rgba(3, 236, 255, 0.2);
}

.bjzol_box_l tbody {
  width: 100%;
  display: block;
  height: 150px;
}

.bjzol_box_l .qh_table_1 td div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 40px;
  max-width: 100%;
  padding-left: 10px;
}

.l-box {
  margin-bottom: 20px;
}

.chart-box {
  width: 100%;
  height: calc(100% - 30px); /* 调整图表容器高度 */
  margin-top: 30px; /* 调整上边距 */
  position: relative;
}

.bigdata-demo-1 {
  display: flex;
  flex-direction: column
}

.l-box {
  /* flex: 1; */
  width: 100%;
  /* height: 33%; */
  position: relative;
}

.l-box-1 {
  height: 300px; /* 增加高度 */
}

.l-box-2 {
  flex: 1;
  height: 400px; /* 增加高度 */
}

.l-box-3 {
  flex: 1;
  height: 400px; /* 增加高度 */
}

.l-box-3 .chart-box {
  /* height: 210px; */
}
.map-table {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.l-table {
  flex: 1;
  padding-right: 5px;
}

.t-head {
  color: #2ad8df;
  height: 35px;
  line-height: 35px;
  background: rgba(3, 65, 121, 0.3);
  border-top: 1px solid #55eff1;
}

.t-con {
  color: #fff;
  line-height: 35px;
}

.map-table ul {
  display: flex;
  justify-content: space-between;
}

.map-table li {
  flex: 1;
}

.r-table {
  flex: 1;
  padding-left: 5px;
}
ol, ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.accu-demo {
  position: absolute;
  width: 315px;
  height: 70px;
  position: absolute;
  font-size: 16px;
  padding: 12px 0 0 130px;
  color: #fff;
}

.accu-bg1 {
  top: 25px;
  left: 30px;
  background: url(images/accu-slbg.png);
}

.accu-bg2 {
  top: 25px;
  right: 30px;
  background: url(images/accu-jebg.png);
}

.accu-demo h3 {
  font-size: 16px;
  color: #fff;
  line-height: 0;
}

.accu-demo span em {
  font-size: 18px;
  padding-right: 5px;
}
.map-tit {
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: -60px;
  width: 200px;
  height: 65px;
  padding-left: 70px;
  background: url(images/map-dot.png) no-repeat;
}

.map-tit h2 {
  line-height: 65px;
  font-size: 22px;
  color: #2ad8df;
}
.c-box-1 {
  flex: 1;
  background: url(images/map-bg.png) center bottom 50px no-repeat;
  background-size: 100% auto;
  position: relative;
}
.daydata-box {
  position: absolute;
  right: 40px;
  top: 0;
}

.data-demo {
  width: 216px;
  height: 57px;
  margin-bottom: 15px;
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 85px;
}

.data-demo h3 {
  width: 100%;
  color: #31f0f8;
  font-size: 18px;
  padding-bottom: 2px;
  margin: 0;
  line-height: normal;
}

.data-demo span {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 12px;
}

.data-demo-1 {
  background: url(images/datademo-bg1.png) no-repeat;
}

.data-demo-2 {
  background: url(images/datademo-bg2.png) no-repeat;
}

.data-demo-3 {
  background: url(images/datademo-bg3.png) no-repeat;
}

.operation-box {
  width: 480px;
  height: 260px;
  position: absolute;
  right: 40px;
  bottom: 50px;
  /*background: url(images/operation-bg.png) no-repeat;*/
  background-size: 100% 100%;
  display: flex;
}
.r-box {
  width: 100%;
  height: 33%;
  position: relative;
}

.r-box-1 {
  height: 270px;
}

/*.r-box-2 {*/
/*  flex: 1;*/
/*  height: 400px; !* 增加高度 *!*/
/*}*/

.r-box-2 .chart-box {
  top: 20px;
}

/*.r-box-3 {*/
/*  flex: 1;*/
/*  height: 400px; !* 增加高度 *!*/
/*}*/

.r-box-3 .chart-box {
  top: 46px;
  padding-top: 10px;
}
/*.operation-box {*/
/*  width: 323px;*/
/*  height: 146px;*/
/*  position: absolute;*/
/*  right: 40px;*/
/*  bottom: 50px;*/
/*  background: url(images/operation-bg.png) no-repeat;*/
/*  display: flex;*/
/*}*/

.operation-demo {
  flex: 1;
  position: relative;
}

.tc-chart-box {
  width: 100%;
  height: 100%;
}

.operation-demo h2 {
  width: 100%;
  position: absolute;
  bottom: 35px;
  text-align: center;
  color: #fff;
}
/* 本年数据对比 */

.thisYear-list {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
}

.thisYear-list .thisYear-demo {
  width: 50%;
  padding-left: 55px;
  margin-bottom: 2px;
}

.thisYear-list .thisYear-demo h3 {
  font-size: 16px;
  color: #fff;
}

.thisYear-list .thisYear-demo span {
  font-size: 24px;
  color: #2ad8df;
}

.thisYear-list .thisYear-demo p {
  color: #fff;
  font-size: 16px;
}

.thisYear-list .thisYear-demo p span {
  font-size: 16px;
  color: #f4300e;
  padding-left: 4px;
}

.thisYear-list .thisYear-demo p span.glyphicon {
  font-size: 12px;
  font-weight: 100;
}

.thisYear-demo:nth-child(1) {
  background: url(images/ico1.png) no-repeat left center;
  background-size: 40px 40px;
}

.thisYear-demo:nth-child(2) {
  background: url(images/ico2.png) no-repeat left center;
  background-size: 40px 40px;
}

.thisYear-demo:nth-child(3) {
  background: url(images/ico3.png) no-repeat left center;
  background-size: 40px 40px;
}

.thisYear-demo:nth-child(4) {
  background: url(images/ico4.png) no-repeat left center;
  background-size: 40px 40px;
}
/deep/ .scroll-list .el-table tr {
  background:none !important;
  color: #fff !important;
}
/deep/ .scroll-list .el-table tr:hover td{
  background:#0b77fd;
  color: #fff !important;
}
/deep/ .scroll-list .el-table tr td {
  border-bottom: 1px solid #192953;
}
/deep/ .scroll-list .el-table tr td:nth-child(2) {
  width: 50px;
}
</style>
